<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
  .tb{
    padding-left: 0;
    padding-right: 0;
  }
</style>
<body>
  <!-- 导航栏 -->
  <div class="navbar navbar-default navbar-fixed-top" >
    <div class="container">
        <div class="navbar-header col-md-3 col-xs-5">
            <a href="#" class="navbar-brand">
                <img class="img-responsive img-rounded"
                    src="img/logo.jpeg">
            </a>
        </div>
        <form action="#" class="navbar-form navbar-right">
          <div class="input-group input-group-sm">
          <span class="glyphicon glyphicon-search" style="margin-top: 10px;"></span></div>
        </form>
    </div>
  </div>
    <!-- 标签页 -->
    <div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs navbar-fixed-bottom" role="tablist">
          <li role="presentation" class="active col-md-2 tb"><a class="text-center" href="#home" aria-controls="home" role="tab" data-toggle="tab">
            <span class="glyphicon glyphicon-home " ></span> 
            <p>首页</p>
          </a></li>
          <li role="presentation" class="col-md-2 tb"><a class="text-center" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
            <span class="glyphicon glyphicon-record"></span>
            <p>动态</p>
          </a></li>
          <li role="presentation" class="col-md-3 tb"><a class="text-center" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
            <span class="glyphicon glyphicon-plus" style="background-color: blue; color: white;font-size: 40px;"></span>
          </a></li>
          <li role="presentation" class="col-md-2 tb"><a class="text-center" href="#messages1" aria-controls="messages1" role="tab" data-toggle="tab">
            <span class="glyphicon glyphicon-comment"></span>
            <p>消息</p>
          </a></li>
          <li role="presentation" class="col-md-2 tb"><a class="text-center" href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
            <span class="glyphicon glyphicon-user"></span>
            <p>我的</p>
          </a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">
            <!-- 上方标签页 -->
            <div class="container" style="margin-top: 50px;">

              <!-- 导航 -->
              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home2" aria-controls="home2" role="tab" data-toggle="tab">攻略</a></li>
                <li role="presentation"><a href="#profile2" aria-controls="profile2" role="tab" data-toggle="tab">发现</a></li>
                <li role="presentation"><a href="#messages2" aria-controls="messages2" role="tab" data-toggle="tab">官方</a></li>
                <li role="presentation"><a href="#settings2" aria-controls="settings2" role="tab" data-toggle="tab">同人图</a></li>
              </ul>
            
              <!-- 切换面板 -->
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home2">
                  <!-- 首页-攻略 -->
                   <div class="media"style="margin-top: 30px;">
                    <div class="media-left">
                      <button type="button" class="btn btn-primary" >置顶</button>
                    </div>
                    <div class="media-body" style="line-height: 2;">
                      <p>【攻略区版规】将会移除求助、讨论、反馈贴等非攻略贴</p>
                    </div>
                   </div>
                   <div class="media"style="margin-top: 30px;">
                    <div class="media-left">
                      <button type="button" class="btn btn-primary" >置顶</button>
                    </div>
                    <div class="media-body" style="line-height: 2;">
                      <p>【车站指南】云璃&藿藿·攻略合集 | 配队·配装·机制解读</p>
                    </div>
                   </div>

                   <div class="col-md-5 my-nr1" >
                    <ul class=" container ">
                      <li class="">
                        <div class="media" style=" padding: 10px;">
                          <div class="media-left  ">
                              <img src="img/logo/1dfc75cd4d62557a92f129ea38e200e2_5836449846570239056.jpg" class=" " style="width: 30px;" alt="">
                          </div>
                          <div class="media-body ">
                              <h4>路人甲</h4>
                          </div>
                          <div class="media-right">
                            <button class="btn btn-primary navbar-btn">关注</button>
                          </div>
                        </div>
                      </li>
                      <li class=""><button class="btn btn-primary navbar-btn btn-sm">用户lv6</button>离神自爆流，非2命黄泉一样乱杀</li>
                      <li><img src="img/biaoti/截屏1.png" class=" img-rounded" alt=""></li>
                      <li>
                        <div class="input-goup ">
                          <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">11</span></a></p>
                          <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">45</span></a></p>
                      </div>
                      </li>
                    </ul>
                   </div>

                   <div class="col-md-5 col-md-offset-2 my-nr1" >
                    <ul class=" container ">
                      <li class="">
                        <div class="media" style=" padding: 10px;">
                          <div class="media-left  ">
                              <img src="img/logo/4d097206ae01932f18bb7f214ff0c541_7652221066078758384.jpg" class=" " style="width: 30px;" alt="">
                          </div>
                          <div class="media-body ">
                              <h4>路人乙</h4>
                          </div>
                          <div class="media-right">
                            <button class="btn btn-primary navbar-btn">关注</button>
                          </div>
                        </div>
                      </li>
                      <li class=""><button class="btn btn-primary navbar-btn btn-sm">用户lv5</button>崩铁虚构叙事其四</li>
                      <li><img src="img/biaoti/屏幕截图 2.png" class=" img-rounded" alt=""></li>
                      <li>
                        <div class="input-goup ">
                          <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">14</span></a></p>
                          <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">28</span></a></p>
                      </div>
                      </li>
                    </ul>
                   </div>

                   <div class="col-md-5 my-nr1">
                    <ul class=" container ">
                      <li class="">
                        <div class="media" style=" padding: 10px;">
                          <div class="media-left  ">
                              <img src="img/logo/2f96db3958e5d76b107890b5b7822092_3673415445472957331.jpg" class=" " style="width: 30px;" alt="">
                          </div>
                          <div class="media-body ">
                              <h4>和老九</h4>
                          </div>
                          <div class="media-right">
                            <button class="btn btn-primary navbar-btn">关注</button>
                          </div>
                        </div>
                      </li>
                      <li class=""><button class="btn btn-primary navbar-btn btn-sm">用户lv9</button>击破三月七居然这么好养？别玩直伤了！</li>
                      <li><img src="img/biaoti/屏幕截图 3.png" class=" img-rounded" alt=""></li>
                      <li>
                        <div class="input-goup ">
                          <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">91</span></a></p>
                          <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">810</span></a></p>
                      </div>
                      </li>
                    </ul>
                   </div>

                   <div class="col-md-5 col-md-offset-2 my-nr1">
                    <ul class=" container ">
                      <li class="">
                        <div class="media" style=" padding: 10px;">
                          <div class="media-left  ">
                              <img src="img/logo/983b2e6958ed856239116975e82c5d0c_1609236053807887677.jpg" class=" " style="width: 30px;" alt="">
                          </div>
                          <div class="media-body ">
                              <h4>敖十一</h4>
                          </div>
                          <div class="media-right">
                            <button class="btn btn-primary navbar-btn">关注</button>
                          </div>
                        </div>
                      </li>
                      <li class=""><button class="btn btn-primary navbar-btn btn-sm">用户lv10</button>差分宇宙挑战赛:尾巴大队出征，寸草不生！</li>
                      <li><img src="img/biaoti/屏幕截图 4.png" class=" img-rounded" alt=""></li>
                      <li>
                        <div class="input-goup ">
                          <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">19</span></a></p>
                          <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">81</span></a></p>
                      </div>
                      </li>
                    </ul>
                   </div>

                </div>
                <!-- 首页-发现 -->
                <div role="tabpanel" class="tab-pane" id="profile2" style="margin-top: 50px;">
                  <div class="media" style="border-bottom: 1px dashed #ccc; padding: 10px;">
                    <div class="media-left col-md-3 col-xs-4">
                        <img src="img/logo.jpeg" class="img-responsive " style="width: 50%;" alt="">
                    </div>
                    <div class="media-body ">
                        <h3>崩坏：星穹铁道</h3>
                        <p class="h4">原此行，终抵群星</p>
                        <p>米哈游科技（上海）有限公司</p>
                    </div>
                    <div class="media-right ">
                      <button type="button" class="btn btn-primary btn-lg" style="margin-top: 30px;">更新</button>
                    </div>
                  </div>
                  <!-- 内容1 -->
                   <div class="col-md-5 my-nr1" >
                    <ul class=" container ">
                      <li class="">
                        <div class="media" style=" padding: 10px;">
                          <div class="media-left  ">
                              <img src="img/logo/6.png" class=" " style="width: 30px;" alt="">
                          </div>
                          <div class="media-body ">
                              <h4>纯鹿人</h4>
                          </div>
                          <div class="media-right">
                            <button class="btn btn-primary navbar-btn">关注</button>
                          </div>
                        </div>
                      </li>
                      <li class=""><button class="btn btn-primary navbar-btn btn-sm">萌新</button><br>
                        有没有大佬跟我说一下前期练哪些角色啊</li>
                      <li><img src="img/biaoti/屏幕截图 5.png" class=" img-rounded" alt=""></li>
                      <li>
                        <div class="input-goup ">
                          <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">7</span></a></p>
                          <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">27</span></a></p>
                      </div>
                      </li>
                    </ul>
                   </div>

                   <div class="col-md-5 col-md-offset-2 my-nr1" >
                    <ul class=" container ">
                      <li class="">
                        <div class="media" style=" padding: 10px;">
                          <div class="media-left  ">
                              <img src="img/logo/5.jpg" class=" " style="width: 30px;" alt="">
                          </div>
                          <div class="media-body ">
                              <h4>不停的鹿</h4>
                          </div>
                          <div class="media-right">
                            <button class="btn btn-primary navbar-btn">关注</button>
                          </div>
                        </div>
                      </li>
                      <li class=""><button class="btn btn-primary navbar-btn btn-sm">我发现了流萤的逆天bug，但是……</button><br>
                        不愧是我老婆流萤，从来不作弊</li>
                      <li><img src="img/biaoti/屏幕截图 6.png" class=" img-rounded" alt=""></li>
                      <li>
                        <div class="input-goup ">
                          <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">17</span></a></p>
                          <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">96</span></a></p>
                      </div>
                      </li>
                    </ul>
                   </div>

                   <div class="col-md-5 my-nr1">
                    <ul class=" container ">
                      <li class="">
                        <div class="media" style=" padding: 10px;">
                          <div class="media-left  ">
                              <img src="img/logo/7.jpg" class=" " style="width: 30px;" alt="">
                          </div>
                          <div class="media-body ">
                              <h4>阿米诺斯</h4>
                          </div>
                          <div class="media-right">
                            <button class="btn btn-primary navbar-btn">关注</button>
                          </div>
                        </div>
                      </li>
                      <li class=""><button class="btn btn-primary navbar-btn btn-sm">逆天斯科特</button><br>
为什么要叫弟兄救你？你可是一匹孤狼啊！</li>
                      <li><img src="img/biaoti/屏幕截图7.png" class=" img-rounded" alt=""></li>
                      <li>
                        <div class="input-goup ">
                          <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">31</span></a></p>
                          <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">650</span></a></p>
                      </div>
                      </li>
                    </ul>
                   </div>

                   <div class="col-md-5 col-md-offset-2 my-nr1">
                    <ul class=" container ">
                      <li class="">
                        <div class="media" style=" padding: 10px;">
                          <div class="media-left  ">
                              <img src="img/logo/8.jpg" class=" " style="width: 30px;" alt="">
                          </div>
                          <div class="media-body ">
                              <h4>芝士雪豹</h4>
                          </div>
                          <div class="media-right">
                            <button class="btn btn-primary navbar-btn">关注</button>
                          </div>
                        </div>
                      </li>
                      <li class=""><button class="btn btn-primary navbar-btn btn-sm">云璃：你是没见过玉足吗？</button><br>
                        彦卿:不知道，还剑就对了</li>
                      <li><img src="img/biaoti/屏幕截图 8.png" class=" img-rounded" alt=""></li>
                      <li>
                        <div class="input-goup ">
                          <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">12</span></a></p>
                          <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">101</span></a></p>
                      </div>
                      </li>
                    </ul>
                   </div>

                </div>
                <div role="tabpanel" class="tab-pane" id="messages2">
                  <ul class="container">
                    <li style="line-height: 100%;">
                      <div class="media">
                        <div class="media-left col-md-4 col-xs-4">
                          <h3>明霄竞武试锋芒 | 2.4版本攻略征集活动</h3>
                          <br>
                          <p>文章发表：07-31 &nbsp; 最后编辑：07-31</p>
                        </div>
                        <div class="media-body ">
                          <img src="img/biaoti/02.jpg" class="img-rounded " style="width: 30%; margin-top: 20px;">
                        </div>
                      </div>
                    </li>

                    <li style="line-height: 100%;">
                      <div class="media">
                        <div class="media-left col-md-4 col-xs-4">
                          <h3>「云璃」主题绘画征集活动开启！</h3>
                          <br>
                          <p>文章发表：07-25</p>
                        </div>
                        <div class="media-body ">
                          <img src="img/biaoti/03.jpg" class="img-rounded " style="width: 30%; margin-top: 20px;">
                        </div>
                      </div>
                    </li>

                    <li style="line-height: 100%;">
                      <div class="media">
                        <div class="media-left col-md-4 col-xs-4">
                          <h3>【有奖活动】「星天演武百晓生」网页活动开启</h3>
                          <br>
                          <p>文章发表：07-27 &nbsp;
                            最后编辑：07-30</p>
                        </div>
                        <div class="media-body ">
                          <img src="img/biaoti/04.jpg" class="img-rounded " style="width: 30%; margin-top: 20px;">
                        </div>
                      </div>
                    </li>

                    <li style="line-height: 100%;">
                      <div class="media">
                        <div class="media-left col-md-4 col-xs-4">
                          <h3>【有奖活动】该出奇兵了 | Keep 联动活动机制说明</h3>
                          <br>
                          <p>文章发表：07-23 &nbsp;
                            最后编辑：07-23</p>
                        </div>
                        <div class="media-body ">
                          <img src="img/biaoti/05.jpg" class="img-rounded " style="width: 30%; margin-top: 20px;">
                        </div>
                      </div>
                    </li>
                  </ul>
                  
                </div>
                <!-- 首页-同人图 -->
                <div role="tabpanel" class="tab-pane" id="settings2">
                  <div class="container col-md-6 col-xs-12 text-center">
                    <ul>
                      <li><img src="img/tongren/1.png" class="img-rounded" style="width: 60%;" alt=""></li>
                      <li><h4>【云璃绘画】天才美少女剑士云璃</h4></li>
                      <li>
                        <div class="media col-md-3 col-md-offset-2 ">
                          <div class="media-left"></div>
                        </div>
                        <div class="media-body">
                          <span class="glyphicon glyphicon-thumbs-up"></span> <span class="badge">157</span>
                        </div>
                      </li>
                    </ul>
                  </div>

                  <div class="container col-md-6 col-xs-12 text-center">
                    <ul>
                      <li><img src="img/tongren/2.jpg" class="img-rounded" style="width: 60%;" alt=""></li>
                      <li><h4>【云璃绘画】天才美少女剑士云璃</h4></li>
                      <li>
                        <div class="media col-md-3 col-md-offset-2 ">
                          <div class="media-left">啊哈哈</div>
                        </div>
                        <div class="media-body">
                          <span class="glyphicon glyphicon-thumbs-up"></span> <span class="badge">138</span>
                        </div>
                      </li>
                    </ul>
                  </div>

                  <div class="container col-md-6 col-xs-12 text-center">
                    <ul>
                      <li><img src="img/tongren/3.jpg" class="img-rounded" style="width: 60%;" alt=""></li>
                      <li><h4>【云璃绘画】天才美少女剑士云璃</h4></li>
                      <li>
                        <div class="media col-md-3 col-md-offset-2 ">
                          <div class="media-left">思古木</div>
                        </div>
                        <div class="media-body">
                          <span class="glyphicon glyphicon-thumbs-up"></span> <span class="badge">163</span>
                        </div>
                      </li>
                    </ul>
                  </div>

                  <div class="container col-md-6 col-xs-12 text-center">
                    <ul>
                      <li><img src="img/tongren/4.jpg" class="img-rounded" style="width: 60%;" alt=""></li>
                      <li><h4>你GBER谁啊</h4></li>
                      <li>
                        <div class="media col-md-3 col-md-offset-2 ">
                          <div class="media-left">G义义</div>
                        </div>
                        <div class="media-body">
                          <span class="glyphicon glyphicon-thumbs-up"></span> <span class="badge">125</span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            
            </div>
          </div>
          <!-- 动态 -->
          <div role="tabpanel" class="tab-pane" id="profile" style="margin-top: 50px;">
            <!-- 轮播图 -->
            <div class="container">
              <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                  <!-- 小圆点 -->
                  <ol class="carousel-indicators">
                      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>
                  <!-- 滑动 -->
                  <div class="carousel-inner" role="listbox">
          
                      <div class="item active">
                        <img src="img/lunbo1.png">
                      </div>
          
                      <div class="item">
                        <img src="img/lunbo2.png" >
                        <div class="carousel-caption">
                        </div>
                      </div>
                      
                      <div class="item">
                        <img src="img/lunbo3.jpg" >
                        <div class="carousel-caption">
                        </div>
                      </div>
                     
                    </div>
                    <!-- 箭头 -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
              </div>
            </div>

            <div >
              <ul class=" container col-md-5">
                <li class="">
                  <div class="media" style=" padding: 10px;">
                    <div class="media-left  ">
                        <img src="img/logo/1dfc75cd4d62557a92f129ea38e200e2_5836449846570239056.jpg" class=" " style="width: 30px;" alt="">
                    </div>
                    <div class="media-body ">
                        <h4>崩坏：星穹铁道</h4>
                    </div>
                  </div>
                </li>
                <li class=""><button class="btn btn-primary navbar-btn btn-sm">官</button>星穹美学速递：云璃</li>
                <li><img src="img/yunli1.png" class="col-md-6 img-rounded" alt=""></li>
                <li ><img src="img/yunli1.png" class="col-md-6 img-rounded"  alt=""></li>
                <li>
                  <br>
                  <div class="input-goup ">
                    <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">666</span></a></p>
                    <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">1万+</span></a></p>
                </div>
                </li>
              </ul>
             </div>

             <div >
              <ul class=" container col-md-5 col-md-offset-2">
                <li class="">
                  <div class="media" style=" padding: 10px;">
                    <div class="media-left  ">
                        <img src="img/logo.jpeg" class=" " style="width: 30px;" alt="">
                    </div>
                    <div class="media-body ">
                        <h4>崩坏：星穹铁道</h4>
                    </div>
                  </div>
                </li>
                <li class=""><button class="btn btn-primary navbar-btn btn-sm">官</button>星穹美学速递：云璃</li>
                <li><img src="img/yunli1.png" class="col-md-6 img-rounded" alt=""></li>
                <li ><img src="img/yunli1.png" class="col-md-6 img-rounded"  alt=""></li>
                <li>
                  <br>
                  <div class="input-goup ">
                    <p  class="navbar-text  "><a class="navbar-link"  href="#"> <span class="glyphicon glyphicon-comment"></span> &nbsp;<span class="badge">666</span></a></p>
                    <p  class="navbar-text "><a class="navbar-link" href="#"> <span class="glyphicon glyphicon-thumbs-up"></span> &nbsp;<span class="badge">1万+</span></a></p>
                </div>
                </li>
              </ul>
             </div>

          </div>
          <!-- 发布 -->
          <div role="tabpanel" class="tab-pane" id="messages" style="margin-top: 100px;">
             <!-- 水平表单 -->

              <div class="container" style="margin: 30px;">
                <form action="#" method="get" class="form-horizontal">
                  <div class="form-group">
                    <label for="user" class="lead col-md-3 text-right">标题</label>
                    <div class="col-md-9">
                       <input type="text" class="form-control" name="bt" id="bt" placeholder="标题（必填）">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="pass" class="lead col-md-3 text-right">内容</label>
                    <div class="col-md-9">
                      <textarea name="tt" id="tt" class="form-control" rows="3" placeholder="请尽情发挥吧……"></textarea>
                    </div>
                  </div>
                 <div class="form-group">
                  <div class="col-sm-offset-3 col-sm-9">
                  <label for="exampleInputFile">图片上传</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">请在这里上传图片</p>
                   </div>
                 </div>
                 <div class="form-group">
                  <div class="col-sm-offset-3 col-sm-9">
                    <button type="submit" class="btn btn-primary">提交</button>
                  </div>
                </div>
                </form>
              </div>
           </div>
           <!-- 消息 -->
          <div role="tabpanel" class="tab-pane" id="messages1" style="margin-top: 50px;">
            
            <div class="navbar navbar-default navbar-fixed-top nav-justified" >
              <div class="container c2">
                <li class="navbar " >
                  <span class="glyphicon glyphicon-comment " style="font-size: 30px; "></span>
                  <p>评论和@</p></li>
                  <li class="navbar ">
                  <span class="glyphicon glyphicon-heart " style="font-size: 30px;"></span>
                  <p>新增关注</p></li>
                  <li class="navbar">
                  <span class="glyphicon glyphicon-thumbs-up " style="font-size: 30px;"></span>
                  <p>收到的赞</p></li>
              </div>
          </div>
        <div style="margin-top: 100px;">
          <div class="list-group container " style="padding: 30px; border: 1px solid #ccc;">
              <div class="media col-md-10 col-xs-10">
                  <div class="media-left col-md-2 col-xs-2" >
                      <img src="img/logo.jpeg" class="img-responsive media-object" alt="">
                  </div>
                  <div class="media-body">
                      <li class="list-group-item " style="border: none; line-height: 3.5;">
                          <h4 class="media-heading">任务3-进击的魔群</h4>
                          <p>闭包的使用原理</p>
                      </li>
                  </div>
              </div>
              <div class="col-md-2 col-xs-2" style="line-height: 350%;">
                <p>1小时前</p>
                <span class="badge">1</span>
              </div>
          </div>
        </div>

        <div style="margin-top: 100px;">
          <div class="list-group container " style="padding: 30px; border: 1px solid #ccc;">
              <div class="media col-md-10 col-xs-10">
                  <div class="media-left col-md-2 col-xs-2" >
                      <img src="img/logo.jpeg" class="img-responsive media-object" alt="">
                  </div>
                  <div class="media-body">
                      <li class="list-group-item " style="border: none; line-height: 3.5;">
                          <h4 class="media-heading">任务3-进击的魔群</h4>
                          <p>闭包的使用原理</p>
                      </li>
                  </div>
              </div>
              <div class="col-md-2 col-xs-2" style="line-height: 350%;">
                <p>1小时前</p>
                <span class="badge">1</span>
              </div>
          </div>
        </div>

        <div style="margin-top: 100px;">
          <div class="list-group container " style="padding: 30px; border: 1px solid #ccc;">
              <div class="media col-md-10 col-xs-10">
                  <div class="media-left col-md-2 col-xs-2" >
                      <img src="img/logo.jpeg" class="img-responsive media-object" alt="">
                  </div>
                  <div class="media-body">
                      <li class="list-group-item " style="border: none; line-height: 3.5;">
                          <h4 class="media-heading">任务3-进击的魔群</h4>
                          <p>闭包的使用原理</p>
                      </li>
                  </div>
              </div>
              <div class="col-md-2 col-xs-2" style="line-height: 350%;">
                <p>1小时前</p>
                <span class="badge">1</span>
              </div>
          </div>
        </div>

        <div style="margin-top: 100px;">
          <div class="list-group container " style="padding: 30px; border: 1px solid #ccc;">
              <div class="media col-md-10 col-xs-10">
                  <div class="media-left col-md-2 col-xs-2" >
                      <img src="img/logo.jpeg" class="img-responsive media-object" alt="">
                  </div>
                  <div class="media-body">
                      <li class="list-group-item " style="border: none; line-height: 3.5;">
                          <h4 class="media-heading">任务3-进击的魔群</h4>
                          <p>闭包的使用原理</p>
                      </li>
                  </div>
              </div>
              <div class="col-md-2 col-xs-2" style="line-height: 350%;">
                <p>1小时前</p>
                <span class="badge">1</span>
              </div>
          </div>
        </div>


          </div>
          <!-- 我的 -->
          <div role="tabpanel" class="tab-pane" id="settings" style="margin-top: 100px;  ">
            
            <div class="container " id="denglv" data-toggle="modal" data-target="#myModal"><button class="btn btn-primary">登录</button></div>
              <div class="container">
                <div class="media">
                  <div class="media-left col-md-2 col-md-offset-2 col-xs-2 col-xs-offset-2">
                    <img src="img/logo.jpeg"  class="img-responsive media-object img-circle" alt="">
                  </div>
                  <div class="media-body" style="padding: 40px;">
                    <h3>崩坏 星穹铁道</h3>
                    <p>uid：00000000</p>
                    <p>ip:江苏</p>
                  </div>
                </div>
                <div class="col-md-9 col-sm-offset-3">
                   <textarea name="" id="" rows="3" placeholder="+添加个性签名" style="width: 50%;"></textarea>
                </div>
               
              </div>
               <!-- 模态框 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
               <div class="modal-dialog modal-sm" role="document">
                 <div class="modal-content">
                   <div class="modal-header">
                       <!-- 关闭按钮 -->
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                     <!-- 标题 -->
                     <h4 class="modal-title" id="myModalLabel">米游社登录</h4>
                   </div>
                   <div class="modal-body">
                     <form action="#">
                       <div class="form-group">
                           <input type="text" name="user" id="user" placeholder="输入账号" class="form-control">
                       </div>
                       <div class="form-group">
                           <input type="text" name="pass" id="pass" placeholder="密码" class="form-control">
                       </div>
                       <div class="form-group">
                        <div class="col-md-6 ">
                          <input type="checkbox" />记住密码
                      </div>
                        <div class="col-md-6 ">
                          <input type="checkbox" />下次自动登录
                        </div>
                      </div>
                       <div class="form-group">
                           <button type="submit" class="btn btn-primary form-control">登录</button>
                       </div>
                     </form>
                   </div>
                   <div class="modal-footer">
                   </div>
                 </div>
               </div>
             </div>

          </div>
        </div>
      
      </div>
</body>
<style>
    *{
        padding: 0;
        margin: 0 auto;
        list-style: none;
        text-decoration: none;
    }
    body{
      height: 3000px;
      position: relative;
    }
    .navbar-brand {
        width: 25%;
        margin-left: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .c2{
      display: flex;
    }
    .c2 li span{
      line-height: 2;
    }
    #denglv{
      position: fixed;
     right: -50%;
     top: 100px;
    
    }
    #myModal{
        position: relative;
        left: -14px;
        top: 10px;
    }
</style>
<!-- 引入jquery -->
 <script src="js/jquery-1.12.4 (1).js"></script>
 <!-- 引入bootstrap.js -->
  <script src="js/bootstrap.js"></script>
</html>